<template>
<div>
    <div class="city-search">
        <input v-model="keyWord" class="search-input" type="text" placeholder="请输入城市地点">
    </div>
    <div class="search-content" ref="search" v-show="keyWord">
        <ul>
            <li class="search-item border-bottom" v-for="item in list" :key="item.id" @click="handleCityClick(item.name)">{{item.name}}</li>
            <li class="search-item border-bottom" v-show="hasNoData">没有匹配城市</li>
        </ul>
    </div>
</div>
    
</template>

<script>
import Bscroll from 'better-scroll'
import {mapMutations} from 'vuex'
export default {
    props: {
        cities: Object
    },
    data () {
        return {
            keyWord: '',
            list: [],
            timer: null
        }
    },
    computed: {
        hasNoData () {
            return !this.list.length
        }
    },
    watch: {
        keyWord () {
           if(this.timer) {
               clearTimeout(this.timer)
           } 
           if(!this.keyWord) {
               this.list = []
               return
           }
           this.timer = setTimeout(()=>{
               const result = []
               for(var i in this.cities) {
                   this.cities[i].forEach((value)=>{
                       if(value.spell.indexOf(this.keyWord) > -1 || value.name.indexOf(this.keyWord) > -1) {
                           result.push(value)
                       }
                   })
               }
               this.list = result
           },100)
        }
    },
    mounted() {
        this.scroll = new Bscroll(this.$refs.search)
    },
    methods: {
        handleCityClick(city) {
            this.changeCity(city)
            this.$router.push('/')
        },
        ...mapMutations(['changeCity'])
    }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/varibles.styl'
    .city-search
        height 0.72rem
        padding 0 .1rem
        background-color $bgc
        .search-input
            box-sizing border-box
            width 100%
            height 0.62rem
            line-height 0.62rem
            padding 0 .1rem
            border-radius .06rem
            text-align center
            color #666
    .search-content
        z-index 1
        overflow hidden
        position absolute
        top 1.58rem
        left 0
        right 0
        bottom 0
        background #eee
        .search-item
            line-height 0.62rem
            padding-left .2rem
            background-color #fff
            color #666
</style>
